@page "/spinner/overview"


@using Syncfusion.Blazor.Spinner

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample explains all the spinner types that are shown on the specified target element.</p>
</SampleDescription>
<ActionDescription>
    <p>The Spinner is a load indicator which occurs whenever the application processing/waiting for an operation.</p>
    <p>While the Spinner is loading, you cannot interact with the target until the process is completed.</p>
    <p>The above sample contains the following themes.</p>
    <ul>
        <li>Material</li>
        <li>Fabric</li>
        <li>Bootstrap</li>
        <li>Bootstrap4</li>
        <li>HighContrast</li>
    </ul>
</ActionDescription>


<div class="control-section sb-property-border">
    <div class="control-section">
        <div id="container">
            <div class="row">
                <div class="col-sm">
                    <div class="spin-row">
                        <SfSpinner Size="40" Label="Material" Type="SpinnerType.Material" Visible="true"></SfSpinner>
                    </div>
                </div>
                <div class="col-sm">
                    <div class="spin-row">
                        <SfSpinner Size="40" Label="Fabric" Type="SpinnerType.Fabric" Visible="true"></SfSpinner>
                    </div>
                </div>
                <div class="col-sm">
                    <div class="spin-row">
                        <SfSpinner Size="40" Label="Bootstrap" Type="SpinnerType.Bootstrap" Visible="true"></SfSpinner>
                    </div>
                </div>
                <div class="col-sm">
                    <div class="spin-row">
                        <SfSpinner Size="40" Label="Bootstrap4" Type="SpinnerType.Bootstrap4" Visible="true"></SfSpinner>
                    </div>
                </div>
                <div class="col-sm">
                    <div class="spin-row spin-row-bg">
                        <SfSpinner Size="40" Label="High Contrast" CssClass="highcontrast" Type="SpinnerType.HighContrast" Visible="true"></SfSpinner>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>

    #container {
        margin-top: 80px;
    }

        #container .row {
            display: flex;
        }

            #container .row .col-sm {
                width: 20%
            }

    .spin-row {
        position: relative;
        height: 120px;
        width: 120px;
    }

    .spin-row-bg {
        background-color: black;
    }

    #container .row {
        margin-right: 0px;
        margin-left: 0px;
    }

    .e-spinner-pane .e-spinner-inner .e-spin-bootstrap {
        fill: #000;
        stroke: #000;
    }

    .e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 {
        stroke: #007bff;
    }

    .e-spinner-pane .e-spinner-inner .e-spin-high-contrast .e-path-arc {
        stroke: #ffd939;
    }

    .e-spinner-pane .e-spinner-inner .e-spin-high-contrast .e-path-circle {
        stroke: none;
    }

    .e-spinner-pane.highcontrast .e-spinner-inner .e-spin-label {
        color: white;
    }

    @@media only screen and (max-width: 1025px) {
        #container .row {
            margin-left: 275px;
            display: block;
        }
    }
</style>

